<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter, RouterLink } from 'vue-router';
import TheNavBar from '../components/TheNavBar.vue';

const router = useRouter();
const searchQuery = ref('');
const selectedRegion = ref(null);

// 模拟数据 - 热门地区分类
const regions = [
  {
    id: 'chuanzang',
    name: '川藏',
    image: '/src/assets/雪山.webp',
    wantToGo: 1256,
    favorites: 892,
    isFavorite: false,
    cities: [
      { name: '成都', spots: ['锦里古街', '宽窄巷子', '都江堰', '大熊猫繁育研究基地'] },
      { name: '拉萨', spots: ['布达拉宫', '大昭寺', '纳木错', '羊卓雍错'] },
      { name: '林芝', spots: ['雅鲁藏布大峡谷', '南迦巴瓦峰', '巴松措'] },
      { name: '稻城亚丁', spots: ['仙乃日', '央迈勇', '夏诺多吉', '牛奶海'] }
    ]
  },
  {
    id: 'jiangzhehu',
    name: '江浙沪',
    image: '/src/assets/江浙沪.png',
    wantToGo: 2341,
    favorites: 1567,
    isFavorite: false,
    cities: [
      { name: '上海', spots: ['外滩', '东方明珠', '迪士尼乐园', '豫园'] },
      { name: '杭州', spots: ['西湖', '灵隐寺', '千岛湖', '西溪湿地'] },
      { name: '苏州', spots: ['拙政园', '狮子林', '周庄古镇', '同里古镇'] },
      { name: '南京', spots: ['中山陵', '夫子庙', '秦淮河', '玄武湖'] }
    ]
  },
  {
    id: 'minnan',
    name: '闽南',
    image: '/src/assets/福建.png',
    wantToGo: 987,
    favorites: 632,
    isFavorite: false,
    cities: [
      { name: '厦门', spots: ['鼓浪屿', '厦门大学', '曾厝垵', '环岛路'] },
      { name: '泉州', spots: ['开元寺', '清源山', '崇武古城', '洛阳桥'] },
      { name: '福州', spots: ['三坊七巷', '鼓山', '西湖公园', '闽江夜游'] },
      { name: '漳州', spots: ['南靖土楼', '东山岛', '云水谣古镇', '火山岛'] }
    ]
  },
  {
    id: 'dongbei',
    name: '东北',
    image: '/src/assets/东北.png',
    wantToGo: 876,
    favorites: 543,
    isFavorite: false,
    cities: [
      { name: '哈尔滨', spots: ['冰雪大世界', '中央大街', '圣索菲亚教堂', '松花江'] },
      { name: '长春', spots: ['伪满皇宫', '净月潭', '长影世纪城', '南湖公园'] },
      { name: '沈阳', spots: ['故宫博物院', '张氏帅府', '九一八历史博物馆', '北陵公园'] },
      { name: '大连', spots: ['金石滩', '老虎滩海洋公园', '星海广场', '棒棰岛'] }
    ]
  },
  {
    id: 'yunnan',
    name: '云南',
    image: '/src/assets/云南.png',
    wantToGo: 1765,
    favorites: 1245,
    isFavorite: false,
    cities: [
      { name: '昆明', spots: ['石林', '滇池', '翠湖公园', '云南民族村'] },
      { name: '大理', spots: ['洱海', '大理古城', '苍山', '崇圣寺三塔'] },
      { name: '丽江', spots: ['丽江古城', '玉龙雪山', '束河古镇', '泸沽湖'] },
      { name: '西双版纳', spots: ['野象谷', '傣族园', '中科院热带植物园', '曼听公园'] }
    ]
  },
  {
    id: 'guangdong',
    name: '广东',
    image: '/src/assets/广东.png',
    wantToGo: 1543,
    favorites: 987,
    isFavorite: false,
    cities: [
      { name: '广州', spots: ['广州塔', '陈家祠', '白云山', '长隆欢乐世界'] },
      { name: '深圳', spots: ['世界之窗', '东部华侨城', '欢乐谷', '深圳湾公园'] },
      { name: '珠海', spots: ['长隆海洋王国', '圆明新园', '珠海渔女', '情侣路'] },
      { name: '汕头', spots: ['南澳岛', '汕头老城区', '礐石风景区', '陈慈黉故居'] }
    ]
  }
];

// 收藏功能
const toggleFavorite = (region) => {
  region.isFavorite = !region.isFavorite;
  region.favorites += region.isFavorite ? 1 : -1;
};

// 查看地区详情
const viewRegionDetail = (region) => {
  selectedRegion.value = selectedRegion.value?.id === region.id ? null : region;
};

// 返回顶部按钮功能
const backToTopButton = ref(null);

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  backToTopButton.value = document.getElementById('backToTop');
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const handleScroll = () => {
  if (backToTopButton.value) {
    if (window.pageYOffset > 300) {
      backToTopButton.value.classList.remove('opacity-0', 'invisible');
      backToTopButton.value.classList.add('opacity-100', 'visible');
    } else {
      backToTopButton.value.classList.remove('opacity-100', 'visible');
      backToTopButton.value.classList.add('opacity-0', 'invisible');
    }
  }
};

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

// 搜索功能
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase().trim();
    
    // 执行搜索逻辑（在实际项目中可能会有更复杂的搜索）
    console.log(`搜索: ${query}`);
    
    // 滚动到结果区域
    setTimeout(() => {
      const resultSection = document.querySelector('.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-6');
      if (resultSection) {
        resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }, 100);
    
    // 实际项目中可以在这里过滤展示的地区列表
    // filteredRegions.value = regions.value.filter(region => 
    //   region.name.toLowerCase().includes(query) || 
    //   region.scenery.some(spot => spot.toLowerCase().includes(query))
    // );
  }
};
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-green-50 to-teal-50 font-sans w-full">
    <!-- 使用导航栏组件 -->
    <TheNavBar />
    
    <!-- 搜索栏 -->
    <div class="px-4 py-3 z-20">
      <div class="container mx-auto">
        <div class="relative max-w-xl mx-auto">
          <input 
            v-model="searchQuery"
            @keyup.enter="handleSearch"
            type="text" 
            placeholder="搜索地区、城市、景点..." 
            class="w-full pl-10 pr-12 py-2 rounded-full border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none shadow-sm"
          >
          <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          <button @click="handleSearch" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-primary hover:text-primary/80 transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="w-full px-4 py-8">
      <!-- 标题部分 -->
      <div class="text-center mb-12">
        <button 
          @click="router.push('/log')"
          class="absolute left-4 top-28 bg-primary text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 hover:bg-primary/90"
        >
          <i class="fa fa-arrow-left mr-1"></i> 返回首页
        </button>
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">国内热门地区探索</h1>
        <p class="text-gray-600 text-lg">选择心仪的目的地，开始你的旅行计划</p>
      </div>

      <!-- 地区分类卡片 -->
      <div class="space-y-8">
        <div 
          v-for="region in regions" 
          :key="region.id" 
          class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300"
        >
          <!-- 地区头部信息 -->
          <div class="md:flex cursor-pointer" @click="viewRegionDetail(region)">
            <div class="md:w-1/3 relative h-64 md:h-auto">
              <img :src="region.image" :alt="region.name" class="w-full h-full object-cover">
              <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent"></div>
              <div class="absolute bottom-4 left-4 text-white">
                <h2 class="text-2xl font-bold mb-2">{{ region.name }}</h2>
                <div class="flex items-center space-x-4">
                  <div class="flex items-center">
                    <i class="fa fa-map-marker mr-1"></i>
                    <span>{{ region.wantToGo }}人想去</span>
                  </div>
                  <div class="flex items-center">
                  <i class="fa" :class="region.isFavorite ? 'fa-heart' : 'fa-heart-o'" :style="{ color: region.isFavorite ? '#FF3B30' : 'white' }"></i>
                  <span>{{ region.favorites }}人收藏</span>
                </div>
                </div>
              </div>
              <!-- 收藏按钮 - 优化响应速度 -->
              <button 
                @click.stop="toggleFavorite(region)"
                class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/30 backdrop-blur-sm flex items-center justify-center hover:bg-white/50 active:bg-white/70 transition-all duration-150 touch-action:manipulation focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50"
                style="touch-action: manipulation;"
              >
                <i :class="['fa', region.isFavorite ? 'fa-heart' : 'fa-heart-o', 'text-lg']" :style="{ color: region.isFavorite ? '#FF3B30' : 'white' }"></i>
              </button>
            </div>
            <div class="md:w-2/3 p-6">
              <p class="text-gray-700 mb-4">
                {{ region.name }}地区拥有丰富的旅游资源和独特的文化魅力，是众多旅行者向往的目的地。
                这里有壮丽的自然风光、悠久的历史文化、美味的特色美食，等待你的探索和发现。
              </p>
              <div class="flex flex-wrap gap-3 mb-4">
                <span v-for="city in region.cities.slice(0, 4)" :key="city.name" class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">
                  {{ city.name }}
                </span>
                <span v-if="region.cities.length > 4" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">
                  +{{ region.cities.length - 4 }}个城市
                </span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-gray-500 text-sm">点击查看详情</span>
                <i :class="['fa fa-angle-down text-primary transition-transform duration-300', { 'rotate-180': selectedRegion?.id === region.id }]"></i>
              </div>
            </div>
          </div>
          
          <!-- 地区详情 - 城市景点列表 -->
          <transition name="fade">
            <div v-if="selectedRegion?.id === region.id" class="p-6 border-t border-gray-100 bg-gray-50">
              <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div v-for="city in region.cities" :key="city.name" class="bg-white rounded-lg p-4 shadow-sm">
                  <h3 class="text-lg font-bold text-primary mb-3">{{ city.name }}</h3>
                  <div class="space-y-2">
                    <div v-for="(spot, index) in city.spots" :key="index" class="flex items-start">
                      <i class="fa fa-map-pin text-primary mt-1 mr-2"></i>
                      <span class="text-gray-700">{{ spot }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
      <div class="w-full px-4 text-center">
        <p class="mb-4"><i class="fa fa-paper-plane mr-2"></i>校友行 - 大学生专属旅行社区</p>
        <p class="text-gray-400 text-sm">© 2023 校友行. 保留所有权利.</p>
      </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 bg-primary rounded-full text-white shadow-lg flex items-center justify-center hover:bg-primary/90 transition-all duration-300 opacity-0 invisible hover-scale" @click="scrollToTop">
      <i class="fa fa-arrow-up"></i>
    </button>
  </div>
</template>

<style scoped>
:root {
  --primary: #FF7A45; /* 活力橙 */
  --secondary: #40A9FF; /* 清新蓝 */
  --tertiary: #52C41A; /* 生机绿 */
  --dark: #1F2937;
  --light: #F9FAFB;
}

.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.text-dark {
  color: var(--dark);
}

.text-gray-600 {
  color: #4B5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-500 {
  color: #6B7280;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  max-height: 0;
}

/* 背景模糊 */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* 响应式布局 */
@media (max-width: 768px) {
  .md\:grid-cols-2,
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .md\:flex {
    flex-direction: column;
  }
  
  .md\:w-1\/3,
  .md\:w-2\/3 {
    width: 100%;
  }
  
  .relative.h-64 {
    height: 40vh;
  }
  
  .nav .flex-grow {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}
</style>

<style>
/* 全局样式 - 移除CDN依赖，使用项目内的Font Awesome */

/* 修复移动端底部安全区域 */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}
</style>